<template>
  <div class="page-content">
    <hy-table
      :listData="dataList"
      :listCount="dataCount"
      v-model:page="pageInfo"
      v-bind="contentTableConfig"
    >
      <!-- 头部插槽 -->
      <template #headerHandler>
        <el-button type="primary" @click="handleNewClick">新建</el-button>
      </template>
      <template #status="scope">
        <el-button plain :type="scope.row.enable ? 'success' : 'danger'">
          {{ scope.row.enable ? "启用" : "禁用" }}
        </el-button>
      </template>
      <template #createAt="scope">
        <span>{{ scope.row.createAt }}</span>
      </template>
      <template #updateAt="scope">
        <span>{{ scope.row.updateAt }}</span>
      </template>
      <template #handler="scope">
        <div>
          <el-button @click="handleEditClick(scope.row)">修改</el-button>
          <el-button @click="handleDeleteClick(scope.row)">删除</el-button>
        </div>
      </template>
    </hy-table>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import HyTable from "./Com/BaseTable.vue";
interface Props {
  pageName: string;
  contentTableConfig: any;
}
const props = withDefaults(defineProps<Props>(), {
  pageName: "",
  contentTableConfig: {},
});
console.log(props);
const pageInfo = ref({ currentPage: 1, pageSize: 10 });
const dataList = computed(() => {
  return [];
});
const dataCount = 0;
const getPageData = (queryInfo: any = {}) => {
  // 传递
  console.log(queryInfo);
};
watch(pageInfo, () => getPageData());

const emit = defineEmits<{ (e: "newBtnClick"): void }>();
const handleNewClick = () => {
  emit("newBtnClick");
};
const handleEditClick = (row: any) => {
  console.log(row);
};
const handleDeleteClick = (row: any) => {
  console.log(row);
};
defineExpose({ getPageData });
</script>
